﻿<head>
	<script src="~/lib/vue/dist/vue.global.js"></script>
	<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
	<script src="~/lib/element-plus/dist/index.full.js"></script>
	<script src="~/lib/axios/dist/axios.js"></script>
</head>
<div id="app">
	<table width="100%">
		<tr>
			<td>
				<font color="black">
					您正在做的业务是：人力资源--客户化设置--人力资源档案管理设置--职位设置
				</font>
			</td>
		</tr>
		<tr>
			<td align="right">
				<el-button v-on:click="tj">添加</el-button>
			</td>
		</tr>
	</table>
	<el-table :data="tableData" :header-cell-style="{background:'#FFDB6F',color:'#606266'}">
		<el-table-column prop="majorKindId" label="职位分类编号"></el-table-column>
		<el-table-column prop="majorKindName" label="职位分类名称"></el-table-column>
		<el-table-column prop="majorId" label="职位编号"></el-table-column>
		<el-table-column prop="majorName" label="职称名称"></el-table-column>
		<el-table-column label="删除">
			<template #default="scope">
				<el-button v-on:click="handleEdit(scope.row.makId)" type="text">
					删除
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="dialogVisibleAdd"
			   title="添加"
			   width="800">
		<span>
			<el-form :rules="rules" :model="from" label-width="auto" style="max-width: 750px">
				<el-form-item label="职位分类编号" prop="MajorKindId">
					<el-input v-model="from.MajorKindId" />
				</el-form-item>
				<el-form-item label="职分类位名称" prop="MajorKindName">
					<el-input v-model="from.MajorKindName" />
				</el-form-item>
				<el-form-item label="职分类位名称" prop="MajorId">
					<el-input v-model="from.MajorId" />
				</el-form-item>
				<el-form-item label="职分类位名称" prop="MajorName">
					<el-input v-model="from.MajorName" />
				</el-form-item>
				<el-form-item>
					<el-button v-on:click="dialogVisibleAdd = false">取消</el-button>
					<el-button type="primary" v-on:click="AddOk()">
						变更
					</el-button>
				</el-form-item>
			</el-form>

		</span>

	</el-dialog>
</div>
<script>
	var { createApp, reactive, ref } = Vue
	var app = createApp({
		setup() {
			let tableData = ref([])

			//查询
			function Fill() {
				axios.get('/GetCM')
					.then(res => {
						tableData.value = res.data;
					})
			}
			Fill();
			//删除
			function handleEdit(makId) {
				if (confirm("确定要删除吗？")) {
					axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
					axios.post('/DeleteCM', { id: makId }).then(res => {
						if (res.data) {
							Fill();
							alert("成功");
						}
					}).catch(err => {
						console.log(err);
					})
				}
			}
			//添加
			let dialogVisibleAdd = ref(false);
			let from = reactive({
				MajorKindId: "",
				MajorKindName: "",
				MajorId: "",
				MajorName: ""
			})
			const rules = {
				MajorKindId: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				],
				MajorKindName: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				],
				MajorId: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				],
				MajorName: [
					{ required: true, message: '不能为空', trigger: 'blur' },
					// 其他验证规则...
				]
				// 其他字段的验证规则...
			};
			function tj() {
				dialogVisibleAdd.value = true;
			}
			function AddOk() {
				axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
				axios.post('/AddCM', {
					MajorKindId: from.MajorKindId,
					MajorKindName: from.MajorKindName,
					MajorId: from.MajorId,
					MajorName: from.MajorName
				}).then(res => {
					if (res.data) {
						Fill();
						alert("成功");
						from.MajorKindId="";
						from.MajorKindName = "";
						from.MajorId = "";
						from.MajorName = "";
						dialogVisibleAdd.value = false;
					}
				}).catch(err => {
					console.log(err);
				})
			}
			return {
				tableData,
				handleEdit,
				dialogVisibleAdd,
				from,
				rules,
				AddOk,
				tj
			}
		}
	})
	app.use(ElementPlus)
	app.mount("#app");
</script>
<style>
	body {
		background-color: #FFFFBB;
		border: 1px solid #FFDB6F;
		font-family: "Microsoft YaHei", sans-serif;
	}

	el-table {
		background-color: #FFFFBB;
	}
</style>